<template>
	<div class="sub-cate-wrap">

		<tip
			v-if="!data.length"
			content="请选择类别"
			:tip-style="{background:'#fbfcfd'}"
		></tip>

		<template v-if="data.length">
			
			<!-- 首字母筛选区 -->
			<div class="filter">
				<span 
					class="filter-item" 
					v-for="(item,index) in cateList" 
					:key="index"
					:class="{current:item.current}"
					@click="filterItemClick(item,cateList)"
				>{{item.letter}}</span>
			</div>
			<!-- 选项列表区 -->
			<div class="list">
				<el-tag
					class="tag-item" 
					v-for="(item,index) in filterList" 
					size="mini" 
					:type="item.selected ? '' : 'info'" 
					effect="dark"
					@click="cateClcik($event,item)"
				>{{item.name}}</el-tag>
				
			</div>
			<!-- 分割线 -->
			<el-divider content-position="left">已选（{{selected.length}} 项）</el-divider>
			<!-- 已选区 -->
			<div class="selected">

				<tip
					v-if="!selected.length"
					content="请选择小分类"
					:tip-style="{background:'#fbfcfd',marginBottom:'15px'}"
				></tip>

				<template v-if="selected.length">
					<el-tag 
						class="tag-item" 
						v-for="(item,index) in selected" 
						size="mini" 
						type="info" 
						closable
						@close="removeSelect($event,item,index)"
					>{{ item.name }}</el-tag>
				</template>
			</div>

		</template>
	</div>
</template>

<script>
import Tip from './tip';
export default{
	components:{
		Tip
	},
	props:{
		value:{
			type:Array
		},
		data:{
			type:Array,
			required:true
		},
		defaultSelect:{
			type:Array,
			default:function(){
				return [];
			}
		}
	},
	mounted(){
		this.selected = this.value;
	},
	data(){
		return{
			updateIndex:0,
			cateList:[],
			filterList:[],
			selected:[],
		}
	},
	watch:{
		data(newVal){

			if(this.updateIndex){
				this.selected = [];
				this.getCateList(newVal);
				this.updateSelect();
			}else{
				this.selected = this.value;
				this.getCateList(newVal);
			}

			this.updateIndex ++;
		},
		value(val){
			this.selected = val;
		}
	},
	methods:{
		getCateList(data){
			this.cateList = this.sortData(data,'firstLetter');
			this.filterList = this.convertFilterList(this.cateList.length ? this.cateList[0].list : []);
		},
		sortData(data,field){
			let letter_reg = /^[A-Z]$/;
			let list = [];
			let letter = '';
			for(let i=0;i<data.length;i++){
				//list['#'] = [];
				letter = data[i][field].toUpperCase();
				//if(!letter_reg.test(letter)) {
				//	letter = '#'
				//}

				if(!(letter in list)) {
					list[letter] = [];
				}

				list[letter].push(data[i]);
			}

			let result = [];

			for(let key in list){
				result.push({
					letter:key,
					list:list[key]
				});
			}

			result.sort((a,b) => {
				return a.letter.charCodeAt(0)-b.letter.charCodeAt(0);
			})

			let json_sort = {};
			for(let i=0;i<result.length;i++){
				if(i === 0){
					result[i]['current'] = true;
				}else{
					result[i]['current'] = false;
				}
				
				json_sort[result[i].letter] = result[i].list;
			}

			return result;
		},
		convertFilterList(data){
			if(!data.length) return data;

			for(let i=0;i<data.length;i++){
				for(let j=0;j<this.selected.length;j++){
					if(data[i].id === this.selected[j].id){
						data[i]["selected"] = true;
					}
				}
				
			}
			return data;
		},
		filterItemClick(item,list){
			for(let i=0;i<list.length;i++){
				list[i]['current'] = false;
			}
			item['current'] = true;
			this.filterList = item.list;
			//判断列表有没有已选项
			
			for(let m=0;m<this.filterList.length;m++){
				this.filterList[m]["selected"] = false;
			};
			if(!this.selected.length) return;

			for(let i=0;i<this.filterList.length;i++){
				for(let j=0;j<this.selected.length;j++){
					if(this.filterList[i].id === this.selected[j].id){
						this.filterList[i]["selected"] = true;
					}
				}
			}
		},
		//点击类别
		cateClcik(e,item){
			item.selected = !item.selected;
			if(item.selected){
				//推入已选
				this.selected.push(item);
			}else{
				//从已选项中移除
				for(let i=0;i<this.selected.length;i++){
					if(this.selected[i].id === item.id){
						this.selected.splice(i,1)
					}
				}
			}
			this.updateSelect();
			this.$forceUpdate();
		},
		//移除选中
		removeSelect(e,item,index){
			console.log(item);
			for(let i=0;i<this.filterList.length;i++){
				if(this.filterList[i].id === item.id){
					this.filterList[i]["selected"] = false;
				}
			};

			this.selected.splice(index,1)
			this.updateSelect();
		},
		//通知父组件更新已选项目
		updateSelect(){
			this.$emit('selected',this.selected);
		}
	}
}	

</script>

<style lang="scss">

.sub-cate-wrap{
	width: 100%;
	border:1px solid #DCDFE6;
	border-radius: 4px;
	.filter{
		padding: 0 15px;
		background: #f3f4f5;
		.filter-item{
			color: #000;
			font-weight: 700;
			margin-right: 10px;
			cursor: pointer;
			&.current{
				color: #ff8100;
			}
		}

	}
	.list{
		padding: 0 15px;
		
	}
	.selected{
		padding: 0 15px;
	}
}

.tag-item{
	cursor: pointer;
	margin-right: 4px;
}

</style>